<template>
  <div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" @click="canel"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">首付录入</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group">
              <label for="" class="col-sm-4 control-label" style="color:#f82c2c">是否交齐：</label>
              <div class="control-label" style="text-align:left">
                <label style="margin:0 20px"><input type="radio" name="params.payFinish" v-model="params.payFinish" value="1"><label style="margin:0 10px">是</label></label>
                <label style="margin:0 20px"><input type="radio" name="params.payFinish" v-model="params.payFinish" value="0"/><label style="margin:0 10px">否</label></label>
              </div>
            </div>
            <div class="form-group">
              <label for="" class="col-sm-4 control-label">首付总金额：</label>
              <div class="col-sm-7">
                <input rows="5" class="form-control" placeholder="请填写交易金额" v-model="params.firstPayment" />
              </div>
              <label class="control-label">元</label>
            </div>
            <div class="form-group">
              <label for="" class="col-sm-4 control-label">首付总比例：</label>
              <div class="col-sm-7">
                <input rows="5" class="form-control" placeholder="请填写首付比例" v-model="params.firstPaymentRatio" />
              </div>
              <label class="control-label">%</label>
            </div>
            <div class="form-group">
              <label for="" class="col-sm-4 control-label">附件：</label>
              <div class="col-sm-7">
                <uploadFile v-bind:uploadState="fileFlag" v-on:fileList='handleAge' :key="params.id"></uploadFile>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn checkedBtn" @click="save">确定</button>
          <button type="button" class="btn btn-default" @click="canel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import uploadFile from "../uploadFile/uploadFile.vue";
  export default {
    props: ["firstPaymentInfo"],
    data() {
      return {
        fileFlag: true,
        params: {}
      };
    },
    components: {
      uploadFile
    },
    watch: {
      firstPaymentInfo: {
        handler(curVal, oldVal) {
          this.params = this.firstPaymentInfo　　　　
        },
        deep: true
      }
    },
    methods: {
      save: function() {
        const eject = /^[0-9]{1,12}([.][0-9]{1,2})?$/;
        const url = this.utilHelper.apiUrl + "/api/updateFirstPayment";
        const {
          params,
          $http,
          affixList
        } = this;
        const {
          payFinish,
          firstPayment,
          firstPaymentRatio
        } = params;
        console.log(firstPayment)
        if (!payFinish||payFinish === "") {
          layer.msg("请选择是否交齐首付!");
          return;
        } else if (firstPayment && firstPayment !== "" && !eject.test(firstPayment)) {
          layer.msg("交易金额最长12位,并且只能有2位小数点!");
          return;
        } else if (firstPaymentRatio && firstPaymentRatio !== "" && Number(firstPaymentRatio) > 100) {
          layer.msg("首付比例不能大于100%!");
          return;
        }
        var body = {};
        body.params = params;
        body.params.affixList = affixList;
        $http.post(url, body).then(response => {
          const res = response.body.resData;
          if (res.result == "1") {
            $("#insertModal").modal("hide");
            layer.msg("录入成功");
            this.fileFlag = false;
            this.params = {};
            this.$emit('saveInfo');
          } else {
            layer.msg(res.resultMsg);
          }
        });
      },
      handleAge(data) {
        if (data == "1") {
          this.fileFlag = true;
        } else {
          this.affixList = data;
        }
      },
  
      canel: function() {
        $("#insertModal").modal("hide");
        this.fileFlag = false;
      }
    }
  };
</script>